<template>
	<z-paging ref="paging" v-model="dataList" @query="getDataList"
		bg-color="linear-gradient(to bottom, #54C5C1, #F6F6FA 50%)">
		<template #top>
			<uni-nav-bar left-icon="left" backgroundColor="transparent" :border="false" color="#fff"
				@clickLeft="onClickNavBack">
				<view class="nav-title">能量池明细</view>
			</uni-nav-bar>
			<view class="tabs" :style="customStyle">
				<view>
					<su-tabs style="width: 50%;background: transparent;border: 0;" :list="tabMaps" lineWidth="20"
						lineColor="#fff" :activeStyle="{ color: '#fff', fontWeight: 550,
			fontsize: '28rpx' }" :scrollable="false" @change="onTabsChange" :current="currentTab"></su-tabs>
				</view>
			</view>
		</template>
		<view class="bottom">
			<view class="logs-box" :style="customStyle" v-if="dataList.length>0">
				<view style="width: 100%;" v-for="(item,index) in dataList" :key="item.id">
					<view class="log">
						<view class="log-left">
							<!-- <image class="avatar" :src="item.avatar" mode="aspectFit"></image> -->
							<view>
								<view class="operation">{{item.title}}</view>
								<view class="time">
									{{formatTime(item.createTime)}}
								</view>
							</view>
						</view>
						<view class="log-right">
							<text
								:style="item.operation=='CONSUMPTION'?'color: #E42121':''">{{item.operation=='CONSUMPTION'?'-':item.operation=='RECEIVE'?'+':''}}{{item.value}}</text>
						</view>

					</view>
					<!-- <su-line color="red" /> -->
					<view class="line" v-if="index!=dataList.length-1"></view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref,
		reactive,
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import transferApi from '@/sheep/api/member/transfer'
	import {
		timeFormat
	} from '@/sheep/helper/index'
	const dataList = ref([])
	const paging = ref(null)
	const pageInfo = reactive({
		pageNo: 1,
		pageSize: 10,

	})
	const getDataList = async (pageNo, pageSize) => {
		pageInfo.pageNo = pageNo ? pageNo : pageInfo.pageNo
		pageInfo.pageSize = pageSize ? pageSize : pageInfo.pageSize


		console.log('pageInfo', pageInfo);

		// 能量池复投明细分页
		let res = await transferApi.getEnergypoolPage(pageInfo)
		console.log('能量池复投明细分页', res)

		if (res.code == 0) {
			paging.value.complete(res.data.list);
		} else {
			paging.value.complete(false);
		}


	}
	const onClickNavBack = () => {
		uni.navigateBack()
	}
	//格式化时间戳
	const formatTime = (timestamp) => {
		return timeFormat(timestamp, 'yyyy-mm-dd hh:MM')
	}
	const currentTab = ref(0)
	const tabMaps = [{
			name: '全部',
			value: '',
		},
		{
			name: '收入',
			value: 'RECEIVE',
		},
		{
			name: '支出',
			value: 'CONSUMPTION',
		},

	];
	// 切换选项卡
	const onTabsChange = async (e) => {
		console.log('切换选项卡', e);
		currentTab.value = e.index;
		pageInfo.pageNo = 1
		pageInfo.operation = e.value
		// dataList.value = []

		paging.value.reload()

	}
	const customStyle = ref('')
	const getElementStyle = () => {
		const systemInfo = uni.getSystemInfoSync()

		let windowWidth = systemInfo.windowWidth

		let styleObj = {
			width: windowWidth - 2 * 10 + 'px',

		}
		customStyle.value = styleObj
	}
	onShow(() => {

		getElementStyle()
	})
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(to bottom, #2E54DF, #F6F6FA 50%);
	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.tabs {
		width: 100%;
		margin-bottom: 20rpx;

	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logs-box {
		// margin-top: 20rpx;
		background: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.log {
			width: 100%;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 16rpx;
			box-sizing: border-box;
			line-height: 1.8;
			border-radius: 10rpx;
			// box-shadow: 0 20rpx 30rpx rgba(0, 0, 0, 0.05);

			.log-left {
				font-size: 26rpx;
				display: flex;
				align-items: center;
				max-width: 71%;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.operation {
					font-weight: 550;
				}

				.time {
					font-size: 24rpx;
					color: #838383;
				}
			}

			.log-right {
				font-size: 28rpx;
				font-weight: 600;

			}
		}

		.line {
			height: 2rpx;
			width: 100%;
			background: #F1F1F1;

		}
	}
</style>